<template>
  <view class="container">
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === '上架' }" @click="changeTab('上架')">已上架</view>
      <view class="tab-item" :class="{ active: currentTab === '下架' }" @click="changeTab('下架')">已下架</view>
    </view>
    <view v-if="currentTab === '上架'" class="house-list">
      <view class="house-item" v-for="(house, index) in houseList" :key="index">
        <view class="house-img"></view>
        <view class="house-info">
          <view class="house-location">{{ house.villageCity }} {{ house.villageName }}</view>
          <view class="house-price">寄售金额 {{ house.price }}万</view>
          <view class="house-statistics">
            <view>经理人回复：{{ house.replyCount }}人</view>
            <view>浏览量：{{ house.viewCount }}人</view>
            <view>房源状态：{{ houseStateText(house.state) }}   {{house.type===4?'二手房':'租房'}}</view>
          </view>
        </view>
        <view class="house-actions">
          <!-- 0=待审核,1=审核中,2=已上架,,3=已下架,4=已拒绝 -->
          <button class="action-btn exposure-btn" @click="exposeHouse(house)">点击曝光</button>
          <button class="action-btn exposure-btn" @click="checkHouse(house)">查看房源</button>
          <button class="action-btn off-shelf-btn" @click="offShelfHouse(house)" v-if="house.state === 2">下 架</button>
          <button class="action-btn enable-btn" @click="enableHouse(house)" v-if="house.state === 3">上 架</button>
          <button class="action-btn refused-btn" @click="refusedHouse(house)" v-if="house.state === 0 || house.state === 1">拒绝房源</button>
          <button class="action-btn enable-btn" @click="enableHouse(house)" v-if="house.state === 0">审核房源</button>
          <button class="action-btn select-broker-btn" @click="openBrokerPopup(house)">经纪人</button>
        </view>
      </view>
    </view>
    <view v-if="currentTab === '下架'" class="house-list">
      <view class="house-item" v-for="(house, index) in offShelfHouseList" :key="index">
        <view class="house-img"></view>
        <view class="house-info">
          <view class="house-location">{{ house.villageCity }} {{ house.villageName }}</view>
          <view class="house-price">寄售金额 {{ house.price }}万</view>
          <view class="house-statistics">
            <view>经理人回复：{{ house.replyCount }}人</view>
            <view>浏览量：{{ house.viewCount }}人</view>
            <view>房源状态：{{ houseStateText(house.state) }}   {{house.type===4?'二手房':'租房'}}</view>
          </view>
        </view>
        <view class="house-actions">
          <button class="action-btn enable-btn" @click="enableHouse(house)">上 架</button>
          <button class="action-btn exposure-btn" @click="checkHouse(house)">查看房源</button>
          <button class="action-btn select-broker-btn" @click="openBrokerPopup(house)">经纪人</button>
        </view>
      </view>
    </view>
    <view class="add-icon" @click="addHouse">
      <text>+</text>
    </view>

    <!-- 人员选择框-->
    <u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="showBrokerPopup">
      <view class="search-wrapper">
        <input v-model="searchKeyword" placeholder="搜索经纪人" />
        <button @click="filterBrokers" style="background-color: #ccc">搜索</button>
      </view>
      <view class="broker-list">
        <view class="broker-item" v-for="(broker, index) in brokerList" :key="index">
          <view class="broker-info-wrapper">
            <view class="broker-name">{{ broker.name }}</view>
            <view class="broker-phone">{{ broker.phone }}</view>
          </view>
          <button class="select-btn" :style="{ backgroundColor: selectedBroker && selectedBroker.id === broker.id ? '#007aff' : '#ccc' }" @click="selectBrokerTemp(broker)">选择</button>
        </view>
      </view>
      <view class="confirm-btn-wrapper">
        <button class="confirm-btn" @click="confirmSelectBroker" :disabled="!selectedBroker">确认选择</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { findHouseRoomList, disableHouse, enableHouse, refusedHouse,exposureHouse } from "@/api/house.js";
export default {
  data() {
    return {
      currentTab: '上架',
      houseList: [],
      offShelfHouseList: [],
      showBrokerPopup: false,
      currentHouse: null,
      brokerList: [
        { id: 1, name: '经纪人1', phone: '13800138000' },
        { id: 2, name: '经纪人2', phone: '13900139000' },
        { id: 3, name: '经纪人3', phone: '13700137000' }
      ],
      selectedBroker: null,
      searchKeyword: '',
    };
  },
  onShow() {
    this.findHouseRoomList();
  },
  computed: {

  },
  methods: {
    /**
     * 监听关闭
     */
    close(val) {
      this.$emit("callbackInvoice", val);
    },
    houseStateText(state) {
      const stateMap = {
        0: '待审核',
        1: '审核中',
        2: '已上架',
        3: '已下架',
        4: '已拒绝'
      };
      return stateMap[state] || '未知状态';
    },
    findHouseRoomList() {
      //  villageCity: uni.getStorageSync("address").district,
      findHouseRoomList({
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'update_time,create_time',
        isAsc: 'desc'
      }).then(res => {
        if (res.data.code === 200) {
          this.houseList = res.data.rows.filter(house => house.state === 2);
          this.offShelfHouseList = res.data.rows.filter(house => house.state !== 2);
        }
      });
    },
    changeTab(tab) {
      this.currentTab = tab;
      this.findHouseRoomList();
    },
    exposeHouse(house) {
      // 点击曝光逻辑，这里暂为空
      //exposureHouse

      exposureHouse(house.id).then(res => {
        if (res.data.code === 200) {

        }
      });
    },
    offShelfHouse(house) {//下架
      disableHouse(house.id).then(res => {
        if (res.data.code === 200) {
          this.findHouseRoomList();
        }
      });
    },
    enableHouse(house) {//上架房源
      enableHouse(house.id).then(res => {
        if (res.data.code === 200) {
          this.findHouseRoomList();
        }
      });
    },
    refusedHouse(house) {
      refusedHouse(house.id).then(res => {
        if (res.data.code === 200) {
          this.findHouseRoomList();
        }
      });
    },
    addHouse() {
      uni.navigateTo({
        url: '/pages/house/detail/preHouse'
      });
    },
    checkHouse(house) {//产看房源
      if (house.type === 4) {//新房
        uni.navigateTo({
          url: '/pages/house/detail/preHouse?houseId=' + house.id + "&showType=check"
        });
      } else {//租房
        uni.navigateTo({
          url: '/pages/house/detail/zuHouse?houseId=' + house.id + "&showType=check"
        });
      }
    },
    openBrokerPopup(house) {
      this.currentHouse = house;
      this.showBrokerPopup = true;
      this.selectedBroker = null;
      this.searchKeyword = '';
    },
    selectBrokerTemp(broker) {
      this.selectedBroker = broker;
    },
    confirmSelectBroker() {
      if (this.selectedBroker) {
        this.showBrokerPopup = false;
        // 这里可以添加选择经纪人后的逻辑，比如将经纪人信息关联到房源
        console.log(`为房源 ${this.currentHouse.id} 选择了经纪人 ${this.selectedBroker.name}，手机号：${this.selectedBroker.phone}`);
      }
    },
    filterBrokers() {
      // 搜索按钮点击时触发过滤逻辑
      // if (!this.searchKeyword) {
      //   this.filteredBrokerList = this.brokerList;
      // } else {
      //   const keyword = this.searchKeyword.toLowerCase();
      //   this.filteredBrokerList = this.brokerList.filter(broker => {
      //     return broker.name.toLowerCase().includes(keyword) || broker.phone.includes(keyword);
      //   });
      // }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 20rpx;
  color: #666;
}
.tab-item.active {
  color: #000;
  border-bottom: 2rpx solid #000;
}
.house-list {
  margin-top: 20rpx;
}
.house-item {
  display: flex;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  padding: 10rpx;
}
.house-img {
  width: 30%;
  height: auto;
  background-color: #f0f0f0;
  margin-right: 10rpx;
}
.house-info {
  flex: 1;
}
.house-location {
  font-size: 30rpx;
}
.house-price {
  font-size: 28rpx;
  color: #f60;
  margin-top: 5rpx;
}
.house-statistics {
  font-size: 26rpx;
  color: #999;
  margin-top: 5rpx;
}
.house-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 120rpx;
}
.action-btn {
  padding: 8rpx 16rpx;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 5rpx;
  margin-bottom: 5rpx;
  font-size: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}
.action-btn:hover {
  background-color: #e0e0e0;
}
.exposure-btn {
  background-color: #007aff;
  color: #fff;
}
.exposure-btn:hover {
  background-color: #0056b3;
}
.off-shelf-btn {
  background-color: #ff3b30;
  color: #fff;
}
.off-shelf-btn:hover {
  background-color: #cc0000;
}
.enable-btn {
  background-color: #4cd964;
  color: #fff;
}
.enable-btn:hover {
  background-color: #34a853;
}
.refused-btn {
  background-color: #ff9500;
  color: #fff;
}
.refused-btn:hover {
  background-color: #e67e00;
}
.select-broker-btn {
  background-color: #5856d6;
  color: #fff;
}
.select-broker-btn:hover {
  background-color: #4643c9;
}
.add-icon {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: #f90;
}
.broker-list {
  padding: 20rpx;
  overflow-y: auto;
}
.broker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;
}
.broker-info-wrapper {
  display: flex;
  flex: 1;
}
.broker-name {
  flex: 1;
}
.broker-phone {
  flex: 1;
  margin-left: 10rpx;
}
.select-btn {
  padding: 5rpx 20rpx; /* 增加按钮的左右内边距以增加长度 */
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 20rpx;
  min-width: 80rpx; /* 设置最小宽度 */
}
.confirm-btn-wrapper {
  padding: 20rpx;
  text-align: center;
}
.confirm-btn {
  padding: 10rpx 20rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}
.confirm-btn:disabled {
  background-color: #ccc;
}
.search-wrapper {
  padding: 20rpx;
  display: flex;
  align-items: center;
}
.search-wrapper input {
  flex: 1;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  margin-right: 10rpx;
}
.search-wrapper button {
  padding: 10rpx 20rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 28rpx;
}
</style>